<template>
  <van-popup
    v-model:show="renyuanFlag"
    position="bottom"
    closeable
    :style="{ width: '100%', height: '80%' }"
  >
    <div class="search-box" style="overflow: hidden">
      <van-search
        v-model.trim="keyWord"
        placeholder="搜索姓名或工号"
        @search="handleSearch"
        @clear="handleCancel"
      />
      <div class="search-box-list">
        <van-cell title="房间成员" v-if="keyWord === ''" />
        <template v-if="searchList && searchList.length > 0">
          <div
            v-for="(item, index) in searchList"
            :key="index"
            class="search-list-item"
            @click="handleCheck(item)"
          >
            <!-- <div class="item-check">
              <van-checkbox v-model="item.checked"></van-checkbox>
            </div> -->
            <div class="item-img">
              <div class="avatar-box">{{ item.name.slice(-2) }}</div>
            </div>
            <div class="item-content">
              <div class="item-content-title">
                {{ item.name }}
              </div>
              <div class="item-content-desc">{{ item.jobname }}</div>
              <div class="item-content-desc1">{{ item.deptname }}</div>
            </div>
          </div>
        </template>
        <van-empty
          v-if="!loading && searchList.length == 0 && keyWord != ''"
          description="暂无数据"
        />
        <div v-if="loading" class="loading-box">
          <van-loading />
        </div>
      </div>
    </div>
  </van-popup>
</template>
<script>
export default {
  name: "searchPerson",
  data() {
    return {
      keyWord: "",
      loading: false,
      renyuanFlag: false,
      searchList: [
        { name: "陈冰", code: "02359935" },
        { name: "陈冰1", code: "023599352" },
        { name: "陈冰2", code: "023599351" },
      ],
      showFlag: false,
      active: this.defaultActive,
      result: [],
      current: {},
      selectList: [],
    };
  },
  filters: {
    toSelectList(val) {
      if (val.length == 0) {
        return "";
      }
      return val
        .map((x) => {
          return x.name;
        })
        .join("、");
    },
  },
  watch: {
    keyWord(val) {
      this.handleSearch(this.keyWord);
    },
  },
  methods: {
    handleCheck(item) {
      this.renyuanFlag = false;
      this.result = item;
      this.$emit("complete", { result: this.result });
    },
    async open(persponList) {
      this.searchList = persponList;
      this.searchList.unshift({ name: "小N", code: "12345678" });
      this.keyWord = "";
      this.renyuanFlag = true;
    },
    handleSubmit() {
      this.$emit("complete", { result: this.result, current: this.current });
      this.renyuanFlag = false;
    },
    async searchUser(val) {
      var _this = this;
      //搜索用户
      const res = await _this.$api.searchUserInfo({ keyWord: val });
      this.loading = false;
      if (res.status === 0) {
        _this.searchList = !res.data
          ? []
          : res.data.map((x) => {
              return {
                ...x,
                ...{
                  code: x.psncode,
                  name: x.psnname,
                  checked: _this.result.some((y) => x.psncode == y.code),
                },
              };
            });
      } else {
        this.$toast.fail(res.message);
      }
    },
    handleSearch(val) {
      var _this = this;
      let timer = null;
      if (timer) {
        clearTimeout(timer);
      }
      this.loading = true;
      _this.searchList = [];
      if (!val) {
        timer = setTimeout(async () => {
          _this.searchList = [];
          _this.searchTeamUser();
        }, 300);
      } else {
        // 搜索用户
        timer = setTimeout(async () => {
          // 搜索用户
          _this.searchUser(val);
        }, 1000);
      }
    },
    toCopy(val) {
      return JSON.parse(JSON.stringify(val));
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}

.van-popup {
  overflow: hidden;
}
</style>
